<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			a{
				display: block;
				width: 50px;
				height:50px ;
				background: red;
				text-align: center;
				text-decoration: none;
				line-height: 50px;
			}
			.on{
				background: #000080;
				color: #FFFFFF;
			}
			.box div{
				width: 200px;
				height: 200px;
				text-align: center;
				line-height: 200px;
				font-size: 20px;
				border: 1px solid greenyellow;
				display: none;
			}
		</style>
		<script>
			class Tab{
            constructor(id){
                this.oBox=document.getElementById(id);
                this.a=this.oBox.getElementsByTagName('a');
                this.aDiv=this.oBox.getElementsByTagName('div');
                this.init();
            }
            init(){
                for(let i=0; i<this.a.length; i++){
                    this.a[i].onclick=function(){
                        this.iNow=i;
                        this.hide();
                        this.show(i);
                    }.bind(this);
                }
            }
            hide(){
                for(let i=0; i<this.a.length; i++){
                    this.a[i].className='';
                    this.aDiv[i].style.display='none';
                }
            }
            show(index){
                this.a[index].className='on';
                this.aDiv[index].style.display='block';
            }
       }

        window.onload=function(){
            new Tab('box');
        };
		</script>
	</head>
	<body>
		<div class="box" id="box">
			<a href="#" class="on">一</a>
			<a href="#">二</a>
			<a href="#">三</a>
			<div style="display: block;">11111111</div>
			<div>22222222</div>
			<div>33333333</div>
		</div>
	</body>
</html>
